<!--realtime 实时数据模板;-->
<template>
  <article  v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-row :gutter="20">
      <el-col :span="4"><card id-name="recharge_day"
                              title="实时流水"
                              footTitle="较昨日同时"
                              unit="元"
                              :inc="realtime_recharge_day_inc"
                              :endVal="recharge_day">
                        </card></el-col>
      <el-col :span="4"><card id-name="registerCount"
                              title="实时新增"
                              footTitle="较昨日同时"
                              unit="人"
                              :inc="realtime_regist_peo_inc"
                              :endVal="registerCount"></card></el-col>
      <el-col :span="4"><card id-name="logon_num"
                              title="当前活跃"
                              footTitle="较昨日同时"
                              unit="人"
                              :inc="realtime_logon_num_inc"
                              :endVal="logon_num"></card></el-col>
      <el-col :span="4"><card id-name="pay_count"
                              title="付费账号"
                              footTitle="较昨日同时"
                              unit="人"
                              :inc="realtime_recharge_peo_inc"
                              :endVal="recharge_peo"></card></el-col>
      <el-col :span="4"><card id-name="arppu"
                              title="a   r  p  p  u"
                              footTitle="较昨日同时"
                              unit="元"
                              :inc="realtime_arppu_inc"
                              :endVal="realtime_arppu"></card></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="18"><myecharts  title="数据折线图" :legend="legend" :serieName="serieName" :serieType="serieType"
      :serieStack="serieStack" :serieData="realtime_echartsData"></myecharts></el-col>
    </el-row>
    <date-qry-param  @queryForm="query"/>

    <el-table :data="tabledata" border show-summary style="width: 100%"   :summary-method="getSummaries" :header-cell-style="{backgroundColor:theme.bgcolor,color:theme.activeColor}">
      <el-table-column align="center" type="index"></el-table-column>
      <el-table-column align="center" prop="count_date" sortable label="日期" :formatter="dateFormatter"></el-table-column>
      <el-table-column align="center" prop="recharge_day" sortable label="流水"></el-table-column>
      <el-table-column align="center" prop="registerCount" sortable label="新增用户"></el-table-column>
      <el-table-column align="center" prop="logon_num" sortable label="活跃用户"></el-table-column>
      <el-table-column align="center" prop="recharge_peo" sortable label="付费用户"></el-table-column>
      <el-table-column align="center" prop="new_role_recharge_num" sortable label="新增付费用户"></el-table-column>
      <el-table-column align="center" prop="arpu" sortable label="arpu" :formatter="arppuFormatter"></el-table-column>
      <el-table-column align="center" prop="dauarpu" sortable label="dauarpu" :formatter="darpuFormatter"></el-table-column>
      <el-table-column align="center" prop="payRate" sortable label="付费率" :formatter="payRateFormatter"></el-table-column>
      <el-table-column align="center" prop="new_role_recharge_sum" sortable label="新增流水"></el-table-column>
      <el-table-column align="center" prop="cl_inc" sortable label="新增付费率" :formatter="newPayRateFormatter"></el-table-column>

    </el-table>
  </article>
</template>

<script>
  import {mapState,mapGetters} from 'vuex';
  import Card from "../../components/infoCard";
  import Myecharts from "../charts/lineEcharts";
  import dateQryParam from "@/components/dateQryParam";

  export default {
    components: {Myecharts,Card,dateQryParam},
    data() {
      return {legend:{
          data:['日流水']
        },serieName:['日流水'],
        serieType:['line'],serieStack:['总量']}
    },


    computed: {
      ...mapState( {
        theme: state => state.app.theme,
        tabledata: state => state.realtime.tableData,
        loading:state => state.realtime.loading,
        recharge_day:state => state.realtime.recharge_day,
        monthSum:state => state.realtime.monthSum,
        logon_num:state => state.realtime.logon_num,
        registerCount:state => state.realtime.registerCount,
        recharge_peo:state => state.realtime.recharge_peo,
        realtime_arppu_inc:state => state.realtime.realtime_arppu_inc
      }),
      ...mapGetters([
        'realtime_recharge_day_inc',
        'realtime_logon_num_inc',
        'realtime_regist_peo_inc',
        'realtime_recharge_peo_inc',
        'realtime_arppu',
        'realtime_echartsData'
        // ...
      ])
    },
    methods :{
      dateFormatter:function(row, column, cellValue) {
        return cellValue?new Date(cellValue).Format("yyyy-MM-dd"):'';
      },
      completenessFormatter:function (row, column, cellValue) {
        return row.turnover_month?Math.round(row.turnover_month/15000 * 10000)/100 + '%':0;
      },
      arppuFormatter:function (row, column, cellValue) {
        return row.recharge_peo&&row.recharge_day?(row.recharge_day/row.recharge_peo).toFixed(2):0;
      },
      darpuFormatter:function (row, column, cellValue) {
        return row.logon_num&&row.recharge_day?(row.recharge_day/row.logon_num).toFixed(2):0;
      },
      payRateFormatter:function (row, column, cellValue) {
        return row.logon_num&&row.recharge_peo?Math.round(row.recharge_peo/row.logon_num * 10000)/100 + '%':0;
      },
      newPayRateFormatter:function (row, column, cellValue) {
        return row.registerCount&&row.new_role_recharge_num?Math.round(row.new_role_recharge_num/row.registerCount * 10000)/100 + '%':0;
      },
      getSummaries:function (params ) {
        const sums = [];
        const{columns, data} = params;

        columns.forEach((column,index) => {
          sums[index] = '';
          let values = data.map(item => Number(item[column.property] || 0));
          switch(index){
            case 2:
            case 3:
            case 4:
            case 5:
            case 10:
            case 6:sums[index] = values.reduce((p,c)=>{return p+c;},0);break;
            case 7:sums[index]=sums[5]&&sums[2]?(sums[2]/sums[5]).toFixed(2):0;break;
            case 8:sums[index]=sums[4]&&sums[2]?(sums[2]/sums[4]).toFixed(2):0;break;
            case 9:sums[index]=sums[4]&&sums[5]?((sums[5]* 100/sums[4]).toFixed(2)  + '%'):0;break;
            case 11:sums[index]=sums[3]&&sums[6]?((sums[6]* 100/sums[3]).toFixed(2) + '%'):0;break;
            case 0:sums[index]='合计';
          }
        });
        return sums;
      },
      query:function (param) {
        this.$emit('query',param);
      }

    }
  }

</script>

<style>
</style>

